<template>
  <view class="page">
    <!-- 描述问题 -->
    <view class="card">
      <view class="card-title">请描述您的问题</view>
      <textarea class="textarea" v-model="desc" placeholder="请输入您的问题..." placeholder-class="ph" maxlength="500" auto-height />
    </view>

    <!-- 上传图片 -->
    <view class="card">
      <view class="card-title">请拍摄故障部位</view>
      <view class="grid">
        <view v-for="(img,idx) in images" :key="idx" class="thumb-wrap">
          <image class="thumb" :src="img" mode="aspectFill" @tap="preview(idx)"></image>
          <view class="del" @tap.stop="remove(idx)">×</view>
        </view>
        <view v-if="images.length<max" class="add" @tap="add">
          <text class="iconfont icon-xiangji"></text>
        </view>
      </view>
    </view>

    <!-- 占位防止被按钮遮挡 -->
    <view class="space"></view>

    <!-- 底部提交 -->
    <view class="footer">
      <button :class="['btn-submit', submitDisabled ? 'btn-disabled' : '']" :disabled="submitDisabled" @tap="submit">提交反馈</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FeedbackPage',
  data() {
    return {
      desc: '',
      images: [],
      max: 6
    }
  },
  computed: {
    submitDisabled() { return !this.desc.trim() && this.images.length === 0 }
  },
  methods: {
    add() {
      const left = this.max - this.images.length
      uni.chooseImage({
        count: left,
        sizeType: ['compressed'],
        sourceType: ['camera','album'],
        success: (res) => { this.images = this.images.concat(res.tempFilePaths) }
      })
    },
    preview(idx) { uni.previewImage({ current: this.images[idx], urls: this.images }) },
    remove(idx) {
      this.images.splice(idx,1)
    },
    async submit() {
      if (this.submitDisabled) { uni.showToast({ title: '请填写问题或上传图片', icon: 'none' }); return }
      // TODO: 这里对接你的上传与提交接口（先上传图片，再提交表单）
      uni.showToast({ title: '已提交', icon: 'success' })
      // 清空示例
      // this.desc = ''; this.images = []
    }
  }
}
</script>

<style scoped>
.page { min-height: 100vh; background-color: #f5f6f7; padding: 24rpx; padding-bottom: 160rpx; }
.card { background-color: #ffffff; border-radius: 24rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03); }
.card-title { font-size: 30rpx; color: #333333; font-weight: 700; margin-bottom: 18rpx; }
.textarea { width: 94%; min-height: 220rpx; background-color: #f2f3f5; border-radius: 20rpx; padding: 20rpx; font-size: 28rpx; color: #333333; }
.ph { color: #b7b7b7; }
.grid { display: flex; flex-wrap: wrap; }
.add { width: 160rpx; height: 160rpx; border-radius: 24rpx; background-color: #ffffff; border: 2rpx dashed #dcdcdc; color: #b8b8b8; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; margin-bottom: 20rpx; }

.add  .iconfont { font-size: 56rpx; line-height: 56rpx; }
.thumb-wrap { position: relative; width: 160rpx; height: 160rpx; border-radius: 24rpx; overflow: hidden; margin-right: 20rpx; margin-bottom: 20rpx; }
.thumb { width: 100%; height: 100%; }
.del { position: absolute; top: 6rpx; right: 6rpx; width: 40rpx; height: 40rpx; border-radius: 20rpx; background-color: rgba(0,0,0,0.55); color: #ffffff; font-size: 28rpx; line-height: 40rpx; text-align: center; }
.space { height: 140rpx; }
.footer { position: fixed; left: 0; right: 0; bottom: 24rpx; padding: 0 24rpx; }
.btn-submit { height: 96rpx; line-height: 96rpx; border-radius: 48rpx; background-color: #4a4a4a; color: #ffffff; font-size: 32rpx; font-weight: 600; text-align: center; border: none; }
.btn-disabled { opacity: 0.5; }
</style>
